<template>
	<view class="navbar" :style="{backgroundColor: `rgba(225, 225, 225, ${computedValue.opacity()})`}">
		<view class="statusBar" :style="{height:getStatusBarHeight() + 'px'}"></view>
		<view class="logo u-flex-center" :style="{height:getTitleBarHeight() + 'px'}">
			<image src="/static/images/index-logo.png" mode="aspectFill" class="image"></image>
		</view>
		<view class="search">
			<uv-input v-model="keyWord" :placeholder="computedValue.currentPlaceholder()"
				:customStyle="searchCustomStyle" :placeholderStyle="searchplaceholdertyle" fontSize="28rpx"
				@confirm="searchChange" clearable inputAlign="left">
				<template v-slot:prefix>
					<image class="img" src="https://qn.mtj.cdydsy.com/user_client/static/icons/ss.png"></image>
				</template>
				<template v-slot:suffix>
					<button class="button" @tap="searchChange">搜索</button>
				</template>
			</uv-input>
		</view>
		<customTabs :scrollTop="scrollTop"></customTabs>
	</view>
</template>

<script setup>
	import customTabs from './custom-tabs.vue'
	import { ref, computed, watch } from 'vue'
	import { onUnload } from '@dcloudio/uni-app'
	import { getStatusBarHeight, getTitleBarHeight } from '@/utils/system.js'
	import { navigateTo } from '@/utils/router.js'

	const props = defineProps({
		scrollTop: {
			type: Number,
			default: 0
		}
	})
	const currentPlaceholderIndex = ref(0)
	const keyWord = ref('')
	const placeholderInterval = ref(null)

	const searchCustomStyle = {
		backgroundColor: '#FFFFFF',
		padding: '4rpx 6rpx 4rpx 20rpx',
		borderRadius: "0rpx"
	}
	const placeholder = ['医用面膜 水乳 精华 次抛', '可复美 润百颜 绽研 薇诺娜 创富康']
	const searchplaceholdertyle = "fontSize:28rpx;color:#CACACA"
	const computedValue = computed(() => {
		return {
			currentPlaceholder: () => {
				return placeholder[currentPlaceholderIndex.value] || "";
			},
			opacity: () => {
				return Math.min(props.scrollTop / 500, 0.9)
			}
		};
	})

	// 拿到当前需要展示的数据
	const togglePlaceholder = () => {
		if (placeholder && placeholder.length > 0) {
			currentPlaceholderIndex.value = (currentPlaceholderIndex.value + 1) % placeholder.length;
		}
	}

	// 设置定时器每秒调用 togglePlaceholder 方法
	placeholderInterval.value = setInterval(togglePlaceholder, 3000);

	// 搜索事件
	const searchChange = () => {
		navigateTo(`/subPackages/search/list?keyword=${keyWord.value}`)
	}

	// 组件卸载时清除定时器
	onUnload(() => {
		if (placeholderInterval.value) {
			clearInterval(placeholderInterval.value);
		}
	})
</script>

<style lang="scss" scoped>
	.navbar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;

		.logo {
			width: 100%;

			.image {
				width: 170rpx;
				height: 30rpx;
				display: block;
			}
		}


		.search {
			padding: 0 28rpx;


			.img {
				width: 28rpx;
				height: 26rpx;
				display: block;
			}

			.button {
				height: 56rpx;
				background-color: $base-color;
				font-size: $font-size-28;
				color: #CACACA;
				line-height: 56rpx;
				border-radius: 0rpx;
			}
		}
	}
</style>